<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body ng-app="app">

<div class="container" ng-controller="main">
	<h1 class="text-center">注册系统</h1>
	<form class="form-horizontal" name="regist">
	  <div class="row form-group">
	    <label for="user_name" class="col-xs-4 control-label">用户名</label>
	    <div class="col-xs-8">
	      <input type="text" class="form-control" name="username" id="user_name" placeholder="输入用户名" ng-model="data.username" ng-required="true">
	    </div>
	  </div>
	  <div class="row form-group">
	    <label for="tel" class="col-xs-4 control-label">手机号</label>
	    <div class="col-xs-8">
	      <!-- <input type="text" class="form-control" id="tel" name="tel" placeholder="输入手机号" ng-model="data.tel" ng-pattern="/^1\d{10}$/" ng-required="true"> -->
	      <input type="text" class="form-control" id="tel" name="tel" placeholder="输入手机号" ng-model="data.tel" pattern="^1\d{10}$" ng-minlength="11" ng-maxlength="11" ng-required="true">
	    </div>
	  </div>
	  <div class="row form-group">
	    <label for="address" class="col-xs-4 control-label">地&emsp;址</label>
	    <div class="col-xs-8">
	      <input type="text" class="form-control" id="address" name="address" placeholder="输入地址" ng-model="data.address" ng-required="true">
	    </div>
	  </div>
	  <div class="row form-group">
	    <label for="email" class="col-xs-4 control-label">邮&emsp;箱</label>
	    <div class="col-xs-8">
	      <input type="text" class="form-control" id="emailemail" name="email" placeholder="输入邮箱" ng-model="data.email" ng-pattern="/^\w+@\w+\.\w+$/" ng-required="true">
	      <!-- <input type="text" class="form-control" id="emailemail" name="email" placeholder="输入邮箱" ng-model="data.email" ng-pattern="/^\w+@\w+\.[com|cn|org]$/" ng-required="true"> -->
	    </div>
	  </div>
	  <div class="row form-group warning">
	  	<div class="col-xs-12">
			<p class="text-danger" ng-show="regist.username.$dirty && regist.username.$invalid">正确输入用户名</p>
			<p class="text-danger" ng-show="regist.tel.$dirty && regist.tel.$invalid">正确输入11位数字</p>
			<p class="text-danger" ng-show="regist.address.$dirty && regist.address.$invalid">这项是必填的</p>
			<p class="text-danger" ng-show="regist.email.$dirty && regist.email.$invalid">邮箱的格式不正确</p>
			<p class="text-danger" ng-show="showAllErr">请添加完整</p>
	  	</div>
	  </div>
	  <div class="row form-group">
	    <div class="col-xs-12">
	      <button type="submit" class="btn btn-success submit-btn" ng-click="ckeck()">立即登录</button>
	    </div>
	  </div>
	</form>
</div>	

<script src="../js/angular.min.js" charset="utf-8"></script>
<script type="text/javascript">
	var app =angular.module('app', []);
	app.controller('main', ['$scope', function($scope){
		//定义绑定数据管理
		$scope.data={};
		//当打开页面的时候，不想看到警告所以都要隐藏，当点击按钮的时候，如果都没输入，此时表单验证眉头通过，就显示
		$scope.showAllErr=false;
		//点击条件验证按钮
		$scope.ckeck=function(){
			$scope.showAllErr=$scope.regist.$invalid;
			//打印提交的对与错
			console.log($scope.regist.$valid)
			//表单验证通过我们向服务器发送数据
			if($scope.regist.$valid){
				console.log($scope.data)
			}

		};		
	}])
</script>
<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
</body>
</html>

<!--angular指令02-->